<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>规格文件</title>
		<link rel="stylesheet" href="../src/css/layui.css">
		<style type="text/css">
			
			
			.layui-form-label {
				width: 120px;
			}
			.layui-input-block{
				margin-left: 150px;
			}
			select {
				width: 100%;
				height: 36px;
				border: 1px solid #D2D2D2;
				border-radius: 2px;
			}
			
			.line-height32 {
				line-height: 36px;
			}
			
			.w-title {
				padding: 10px 0 20px;
			}
			
			.w-title a {
				color: #4a4a4a;
			}
			
			.w-blueline {
				display: block;
				width: 7px;
				height: 20px;
				background: #01aaed;
				float: left;
				margin-right: 10px;
				border-radius: 5px;
			}
			.aligncenter {
	text-align: center;
}
.alignright{
	text-align: right;
}
		</style>
	</head>

	<body>
		<div class="layui-fluid">
			<div class="w-title"><span class="w-blueline"></span>
				<a href="###">规格文件</a>
			</div>
			<!--<div class="layui-row">
				<div class="layui-col-md1"><label class="layui-form-label">所属地区</label></div>
				<div class="layui-col-md7">
					<div class="layui-row">
						<div class="layui-col-md3">
							<select name="">
								<option value="">请选择</option>
							</select>
						</div>
						<div class="layui-col-md1 line-height32 aligncenter">省</div>
						<div class="layui-col-md3">
							<select name="">
								<option value="">请选择</option>
							</select>
						</div>
						<div class="layui-col-md1 line-height32 aligncenter">市</div>
						<div class="layui-col-md3">
							<select name="">
								<option value="">请选择</option>
							</select>
						</div>
						<div class="layui-col-md1 line-height32 aligncenter">县</div>
					</div>
				</div>
				<div class="layui-col-md3">
					<div class="layui-form-item">
						<label class="layui-form-label">地块类型</label>
						<div class="layui-input-block">
							<select name="">
								<option value="">请选择</option>
							</select>
						</div>
					</div>
				</div>
				<div class="layui-row">
					<div class="layui-col-md1"><label class="layui-form-label">所属地区</label></div>
					<div class="layui-col-md7">
						<div class="layui-row">
							<div class="layui-col-md3">
								<select name="">
									<option value="">请选择</option>
								</select>
							</div>
							<div class="layui-col-md1 line-height32 aligncenter">积温带</div>
							<div class="layui-col-md3">
								<select name="">
									<option value="">请选择</option>
								</select>
							</div>
							<div class="layui-col-md2 line-height32 aligncenter">所属地区</div>
							<div class="layui-col-md3">
								<select name="">
									<option value="">请选择</option>
								</select>
							</div>
						</div>
					</div>
					<div class="layui-col-md3 alignright">
						<a href="###" class="layui-btn">查询</a>
						<a href="###" class="layui-btn">重置</a>
					</div>
				</div>

			</div>
-->
			<div class="layui-row">
				<div class="layui-col-md2">
					<a href="###" class="layui-btn">保存</a>
					<a href="###" class="layui-btn">新增</a>
					<!--<a href="###" class="layui-btn">添加</a>
					<a href="###" class="layui-btn">导出</a>-->
				</div>
			</div>
			<table id="demoTable" lay-filter="test"></table>
		</div>
		<script src="../src/layui.js"></script>
		<script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">传感器信息</a>
			<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">规格文件</a>
		</script>
		<script>
			layui.use(['table', 'jquery'], function() {
				var table = layui.table;
				var $ = jQuery = layui.$;
				//第一个实例
				table.render({
					elem: '#demoTable',
					//					height: 315
					//  ,url: '/demo/table/user/' //数据接口
					//						,
					page: true //开启分页
						,
					cols: [
						[ //表头
							{
								field: 'id',
								title: '通道号',
								width: '5%',
								align: 'center',
								fixed: 'left'
							}, {
								field: 'dkmc',
								title: '名称',
								align: 'center',
								width: '5%'
							}, {
								field: 'cjsj',
								title: '字段',
								align: 'center',
								width: '10%',
								sort: true
							}, {
								field: 'sbid',
								title: '数据格式',
								align: 'center',
								width: '10%'
							}, {
								field: 'sblx',
								title: '下限',
								align: 'center',
								width: '10%'
							}, {
								field: 'gz',
								title: '上限',
								width: '10%',
								sort: true,
								align: 'center',
							}, {
								field: 'kqsd',
								title: '偏差',
								width: '10%',
								sort: true,
								align: 'center',
							}, {
								field: 'trsf',
								title: '计算公式',
								width: '10%',
								sort: true,
								align: 'center',
							}, {
								field: 'trwd',
								title: '单位',
								width: '10%',
								sort: true,
								align: 'center',
							}, {
								field: 'dcdl',
								title: '排序',
								width: '10%',
								sort: true,
								align: 'center',
							}, {
								field: 'dy',
								title: '显示',
								width: '10%',
								sort: true,
								align: 'center',
							}, {
								field: 'yl',
								title: '雨量',
								width: '10%',
								sort: true,
								align: 'center',
								toolbar: '#barDemo'
							}
						]
					],
					data: [{
						"id": "<div><input type='checkbox'></div>",
						"dkmc": "杜甫",
						"cjsj": "男",
						"sbid": "浙江杭州",
						"sblx": "人生恰似一场修行",
						"gz": "116",
						"kqsd": "116",
						"trsf": "杜甫",
						"trwd": "男",
						"dcdl": "浙江杭州",
						"dy": "人生恰似一场修行",
						"yl": "116",
					}, {
						"id": "<div><input type='checkbox'></div>",
						"dkmc": "杜甫",
						"cjsj": "男",
						"sbid": "浙江杭州",
						"sblx": "人生恰似一场修行",
						"gz": "116",
						"kqsd": "116",
						"trsf": "杜甫",
						"trwd": "男",
						"dcdl": "浙江杭州",
						"dy": "人生恰似一场修行",
						"yl": "116",
					}]
				});
				$('.demoTable .layui-btn').on('click', function() {
					var type = $(this).data('type');
					active[type] ? active[type].call(this) : '';
				});
			});
		</script>
	</body>

</html>